/*
 * 公交站点模块
 *
 * @Author: zhangtao.zhou
 * @Date: 2019-02-22 10:05:49
 * @Last Modified by: zhangtao.zhou
 * @Last Modified time: 2019-03-08 16:37:47
 */
import React from 'react'
import { Image, StyleSheet, FlatList, View, Text, TouchableOpacity, ScrollView } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import flex from '../../../configs/flex'
import fontsize from '../../../configs/fontsize'
import skin from '../../../configs/skin'
import Icon from '../../public/icon';

export default class BusNow extends React.Component {
  constructor (props) {
    super(props)
    // this.state = {
    //   thisID: this.props.thisID
    // }
    this._scroll = this._scroll.bind(this)
    this._setThisID = this._setThisID.bind(this)
    this._isShowCar = this._isShowCar.bind(this)
  }
  scrollTimes=0

  // 车站名称括号替换
  _getVerticalBrackets (stationName) {
    return stationName
    // eslint-disable-next-line
      .replace(/\（/, '︵')
      .replace(/\(/, '︵')
      .replace(/\)/, '︶')
      // eslint-disable-next-line
      .replace(/\）/, '︶')
      .replace(/\(/, '︵')
      .replace(/\)/, '︶')
  }
  // 滚动
  _scroll (index) {
    if (this.refs._flatlist) {
      try {
        // this.refs._flatlist.scrollToIndex({ viewPosition: 0.5, index: index })
        this.refs._flatlist.scrollToOffset({ animated: true, offset: px2dp(142) * index + px2dp(62) - px2dp(360) })
        if (index > 0) {
          this.scrollTimes = this.scrollTimes + 1
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
  // 点击设置当前站点ID
  _setThisID (thisID, lat, lng, thisName) {
    // this._scroll(index)
    this.props.changeThisID(thisID, lat, lng, thisName)
  }
  _isShowCar (stationID, isArrive) {
    let bus = 0
    if (this.props.busNowApis) {
      this.props.busNowApis.forEach(element => {
        if (stationID === element.ID && isArrive === element.ISARRLFT) bus = bus + 1
      })
    }
    if (bus >= 1) {
      return bus
    } else {
      return false
    }
  }
  render () {
    return (
      <ScrollView bounces onScrollEndDrag={()=>{
        this.refs._scrollview.scrollTo({ x: 0, y: 0, animated: true, duration: 500 })
      }}
      ref="_scrollview" showsVerticalScrollIndicator={false}>
        <FlatList data={this.props.stations} getItemLayout={(data, index)=>({ length: px2dp(30), offset: px2dp(142) * index + px2dp(62), index })}
          horizontal
          initialNumToRender={99}
          keyExtractor={(item, index)=>index + ''}
          ListFooterComponent={()=> (<View style={[styles.line, styles.shortLine]}></View>)}
          // ItemSeparatorComponent={()=>(<View style={[styles.line, styles.longLine, { marginTop: px2dp(120) }]}></View>)}
          ListHeaderComponent={()=>(<View style={[styles.line, styles.shortLine]}></View>)}
          // initialScrollIndex={this.props.thisIndex}
          ref="_flatlist"
          renderItem={({ item, index })=>{
            let stationID = item.STATION_ID
            return (
              <View style={{ paddingTop: px2dp(120) }}>
                {this._isShowCar(item.DUALSERIAL_ID, 2) > 1 && index !== this.props.stations.length - 1 ? <Text style={[styles.busText, fontsize.fontsize20, styles.leftText]}>{this._isShowCar(item.DUALSERIAL_ID, 2)}辆</Text> : null}
                {this._isShowCar(item.DUALSERIAL_ID, 1) > 1 && index !== this.props.stations.length - 1 ? <Text style={[styles.busText, fontsize.fontsize20]}>{this._isShowCar(item.DUALSERIAL_ID, 1)}辆</Text> : null}
                {this._isShowCar(item.DUALSERIAL_ID, 2) && index !== this.props.stations.length - 1 ? <Image source={require('../../../../assets/img/Line/bus.png')} style={[styles.busImg, styles.leftBus]}/> : null}
                {this._isShowCar(item.DUALSERIAL_ID, 1) && index !== this.props.stations.length - 1 ? <Image source={require('../../../../assets/img/Line/bus.png')} style={[styles.busImg, styles.arriveBus]}/> : null}
                <TouchableOpacity style={[flex.flexH]} onPress={()=>{ this._setThisID(stationID, item.LATITUDE, item.LONGITUDE, item.STATION_NAME) }}
                  activeOpacity={1}>
                  {/* {index === 0
                  ? <View style={[styles.line, styles.shortLine]}></View> : null} */}
                  <View style={[flex.flexV]}>
                    <View style={[flex.flexV, flex.flexVc]} >
                      {stationID === this.props.thisID ? <Icon name={'place'} size={34}></Icon>
                        : <Image source={require('../../../../assets/img/Line/bus_arrow.png')} style={styles.arrowImg}></Image>
                      }
                      <Text style={stationID === this.props.thisID ? skin.baseColorNoAcitve : null}>{index + 1}</Text>
                      <Text style={[fontsize.fontsize30, { width: px2dp(30) }, stationID === this.props.thisID ? skin.baseColorNoAcitve : null]}>{this._getVerticalBrackets(item.STATION_NAME)}</Text>
                    </View>
                  </View>
                  {this.props.stations.length - 1 !== index
                  // ? <View style={[styles.line, styles.longLine]}></View> : <View style={[styles.line, styles.shortLine]}></View>
                    ? <View style={[styles.line, styles.longLine]}></View> : null
                  }
                </TouchableOpacity>
              </View>
            )
          }}
          showsHorizontalScrollIndicator={false}
        />
      </ScrollView>
    )
  }
  componentDidUpdate () {
    if (this.props.thisIndex && this.scrollTimes <= 1) {
      this._scroll(this.props.thisIndex)
    }
  }
}

const styles = StyleSheet.create({
  arrowImg: {
    height: px2dp(24),
    width: px2dp(24)
  },
  busImg: {
    height: px2dp(33),
    width: px2dp(77),
    position: 'absolute',
    top: px2dp(64)
  },
  arriveBus: {
    left: -px2dp(23)
  },
  leftBus: {
    left: px2dp(50)
  },
  line: {
    marginTop: px2dp(6),
    marginHorizontal: px2dp(6),
    height: px2dp(10),
    backgroundColor: '#cccccc'
  },
  longLine: {
    width: px2dp(100)
  },
  shortLine: {
    width: px2dp(50),
    marginTop: px2dp(125)
  },
  busText: {
    position: 'absolute',
    top: px2dp(25)
  },
  leftText: {
    left: px2dp(76)
  }

})